<template>
	<!-- <searchbox></searchbox> -->
<view class="container">
<!-- 顶部搜索区域 -->
<view class="search-container">
<view class="logo">音乐</view>
<view class="search-box">
<uni-icons type="search" size="20" color="#999"></uni-icons>
<input type="text" placeholder="搜索音乐" placeholder-class="placeholder" />
</view>
</view>
<!-- 轮播图区域 -->
<swiper class="banner-swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image :src="item.imageUrl" mode="aspectFill" class="banner-image" />
</swiper-item>
</swiper>
<!-- 推荐歌曲区域 -->
<view class="recommend-section">
<view class="section-header">
<text class="section-title">推荐歌曲</text>
<view class="more-btn">
<text>更多</text>
<uni-icons type="right" size="14" color="#666"></uni-icons>
</view>
</view>
<view class="song-grid">
<view class="song-item" v-for="(song, index) in recommendSongs" :key="index">
<image :src="song.cover" mode="aspectFill" class="song-cover" />
<view class="song-info">
<text class="song-name">{{ song.name }}</text>
<text class="song-artist">{{ song.artist }}</text>
<view class="play-count">
<uni-icons type="headphones" size="12" color="#999"></uni-icons>
<text>{{ song.playCount }}</text>
</view>
</view>
</view>
</view>
</view>

<!-- 歌曲列表区域 -->
<view class="song-list-section">
<view class="section-header">
<text class="section-title">热门歌曲</text>
<view class="more-btn">
<text>更多</text>
<uni-icons type="right" size="14" color="#666"></uni-icons>
</view>
</view>
<view class="song-list">
<view class="song-list-item" v-for="(song, index) in songList" :key="index">
<image :src="song.cover" mode="aspectFill" class="song-list-cover" />
<view class="song-list-info">
<text class="song-list-name">{{ song.name }}</text>
<text class="song-list-artist">{{ song.artist }}</text>
</view>
<uni-icons type="play-right" size="20" color="#666"></uni-icons>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const bannerList = ref([
{
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/7a62ddbf84b40d6a48161673437b2646.jpg'
},
{
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/ee742b013995c54940351d0a6c7b7c09.jpg'
},
{
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f59c2eaf6c5515c39080792a3a99f666.jpg'
}
]);

const songList = ref([
{
cover: 'https://ai-public.mastergo.com/ai/img_res/d923ab4fe374f028e4c0aca97b075b30.jpg',
name: '无条件',
artist: '陈奕迅'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/eaf3065a8df8206988c42b2bfca69247.jpg',
name: '红玫瑰',
artist: '陈奕迅'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/639dfba45d770ddafc383f015129684c.jpg',
name: '富士山下',
artist: '陈奕迅'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/b059c57d9335847a98722545006ca573.jpg',
name: '爱情转移',
artist: '陈奕迅'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/f78af01cfbd8e92dfedb657bd7388415.jpg',
name: '十年',
artist: '陈奕迅'
}
]);
const recommendSongs = ref([
{
cover: 'https://ai-public.mastergo.com/ai/img_res/aa424ab34dd0bcc55dee6ed650402109.jpg',
name: '告白气球',
artist: '周杰伦',
playCount: '1000万'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/44798d696e7a92f8eb2c8a3d0e8c9d12.jpg',
name: '起风了',
artist: '买辣椒也用券',
playCount: '800万'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/03612b25dac8375d49ef961118a942f1.jpg',
name: '孤勇者',
artist: '陈奕迅',
playCount: '950万'
},
{
cover: 'https://ai-public.mastergo.com/ai/img_res/a4b9e2f700e292705c798fc604f6f896.jpg',
name: '光年之外',
artist: '邓紫棋',
playCount: '750万'
}
]);

</script>
<style>
page {
height: 100%;
background-color: #f8f8f8;
}
.container {
padding: 0 30rpx;
}
.search-container {
display: flex;
align-items: center;
padding: 20rpx 0;
margin-bottom: 30rpx;
}
.logo {
font-size: 36px;
font-weight: bold;
color: #333;
margin-right: 30rpx;
}
.search-box {
flex: 1;
display: flex;
align-items: center;
background-color: #f1f1f1;
border-radius: 32rpx;
padding: 16rpx 24rpx;
}
.search-box input {
flex: 1;
font-size: 14px;
margin-left: 16rpx;
}
.placeholder {
color: #999;
}
.banner-swiper {
height: 300rpx;
margin-bottom: 40rpx;
}
.banner-image {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.recommend-section {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 40rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.section-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.more-btn {
display: flex;
align-items: center;
color: #666;
font-size: 14px;
}
.more-btn text {
margin-right: 4rpx;
}
.song-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
}
.song-item {
background-color: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.song-cover {
width: 100%;
height: 320rpx;
border-radius: 12rpx;
}
.song-info {
padding: 16rpx;
}
.song-name {
font-size: 14px;
color: #333;
font-weight: bold;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song-artist {
font-size: 12px;
color: #666;
display: block;
margin: 8rpx 0;
}
.play-count {
display: flex;
align-items: center;
font-size: 12px;
color: #999;
}
.play-count text {
margin-left: 8rpx;
}

.song-list-section {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 40rpx;
}

.song-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}

.song-list-item {
display: flex;
align-items: center;
padding: 16rpx;
}

.song-list-cover {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}

.song-list-info {
flex: 1;
}

.song-list-name {
font-size: 16px;
color: #333;
margin-bottom: 8rpx;
display: block;
}

.song-list-artist {
font-size: 12px;
color: #666;
display: block;
}
</style>